<template>
    <div>
        <div class="plate" ref="plate">
            <!-- <header class="header">
                <div class="header-title">管网监测</div>
                <img class="header-img" src="@/assets/three/image/header.png">
            </header> -->
            <ZdyHeader title="网管监测" />
            <div class="left-content animate__animated animate__fadeInLeft">
                <div class="content">
                    <div class="card left-card-1">
                        <img class="background" src="@/assets/three/image/pipelineNetwork/left-card-1-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">设备统计</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="overview">
                            <div class="item">
                                <Statistic :value="2068.4" :valueStyle="{ color: '#36DBEC', fontSize:'22px' }">
                                </Statistic>
                                <div class="label">
                                    设备总数
                                </div>
                                <div class="unit">
                                    m³/h
                                </div>
                            </div>
                            <div class="item">
                                <Statistic :value="3558.0" :valueStyle="{ color: '#FF852B', fontSize: '22px' }">
                                </Statistic>
                                <div class="label">
                                    设备总数
                                </div>
                                <div class="unit">
                                    m³/h
                                </div>
                            </div>
                            <div class="item">
                                <Statistic :value="3558.0" :valueStyle="{ color: '#35DF4A', fontSize:'22px' }">
                                </Statistic>
                                <div class="label">
                                    设备总数
                                </div>
                                <div class="unit">
                                    m³
                                </div>
                            </div>
                            <div class="item">
                                <Statistic :value="2068.4" :valueStyle="{ color: '#36DBEC', fontSize:'22px' }">
                                </Statistic>
                                <div class="label">
                                    设备总数
                                </div>
                                <div class="unit">
                                    m
                                </div>
                            </div>
                            <div class="item">
                                <Statistic :value="3558.0" :valueStyle="{ color: '#FF852B', fontSize:'22px' }">
                                </Statistic>
                                <div class="label">
                                    设备总数
                                </div>
                                <div class="unit">
                                    MPa
                                </div>
                            </div>
                            <div class="item">
                                <Statistic :value="3558.0" :valueStyle="{ color: '#35DF4A', fontSize:'22px' }">
                                </Statistic>
                                <div class="label">
                                    设备总数
                                </div>
                                <div class="unit">
                                    mg/L
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">实时数据监测</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="contrast">
                            <div class="item" @click="targetMonitorActive(0)">
                                <img class="item-img" :src="monitorActive == 0 ? contrastActiveImg : contrastImg"
                                    alt="">
                                <div class="label">
                                    压力(MPa)
                                </div>
                            </div>
                            <div class="item" @click="targetMonitorActive(1)">
                                <img class="item-img" :src="monitorActive == 1 ? contrastActiveImg : contrastImg"
                                    alt="">
                                <div class="label">
                                    流量(m³/h)
                                </div>
                            </div>
                            <div class="item" @click="targetMonitorActive(2)">
                                <img class="item-img" :src="monitorActive == 2 ? contrastActiveImg : contrastImg"
                                    alt="">
                                <div class="label">
                                    余氯(mg/L)
                                </div>
                            </div>
                        </div>
                        <div class="monitor">
                            <div class=" item tabel-header">
                                <div class="name"> 姓名</div>
                                <div class="addre"> 位置</div>
                                <div class="time"> 时间</div>
                            </div>
                            <div class="item" v-for="(item, index) in 4" :key="index">
                                <div class="name"> 流量计001</div>
                                <div class="addre">1995.6</div>
                                <div class="time"> 2025-04-13 12:00:00</div>
                            </div>
                        </div>
                    </div>
                    <div class="card left-card-2">
                        <img class="background" src="@/assets/three/image/pipelineNetwork/left-card-2-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">报警信息</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="call-the-police">
                            <div class="item">
                                <img src="@/assets/three/image/equipment/icon.svg" alt="">
                                <div class="msg">2号沉淀池水质浊度异常升高，达到警戒值</div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/equipment/icon.svg" alt="">
                                <div class="msg">中心城区压力传感器数据中断</div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/equipment/icon.svg" alt="">
                                <div class="msg">中心城区压力传感器数据中断</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content animate__animated animate__fadeInRight">
                <div class="content">
                    <div class="card right-card-1">
                        <img class="background" src="@/assets/three/image/pipelineNetwork/right-card-1-background.png"
                            alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">管网资产总览</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="assets">
                            <div class="item">
                                <img src="@/assets/three/image/pipelineNetwork/assets-item-background.svg" alt="">
                                <div class="info">
                                    <Statistic :value="pipelineRetworkMonitoring.pipeTotalLength"
                                        :valueStyle="{ color: '#35DF4A', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">
                                        管网总长(km)
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/pipelineNetwork/assets-item-background.svg" alt="">
                                <div class="info">
                                    <Statistic :value="pipelineRetworkMonitoring.pressureMeterCount"
                                        :valueStyle="{ color: '#35DF4A', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">
                                        压力表数量(个)
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/pipelineNetwork/assets-item-background.svg" alt="">
                                <div class="info">
                                    <Statistic :value="pipelineRetworkMonitoring.flowMeterCount"
                                        :valueStyle="{ color: '#35DF4A', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">
                                        流量计数量(个)
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/pipelineNetwork/assets-item-background.svg" alt="">
                                <div class="info">
                                    <Statistic :value="pipelineRetworkMonitoring.pumpCount"
                                        :valueStyle="{ color: '#35DF4A', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">
                                        水泵数量(个)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card right-card-2">
                        <img class="background" src="@/assets/three/image/pipelineNetwork/right-card-2-background.png"
                            alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">巡检维保概况</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="contrast">
                            <div class="item" @click="targetMaintenanceOverviewActive(0)">
                                <img class="item-img"
                                    :src="maintenanceOvervieActive == 0 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    巡检工单
                                </div>
                            </div>
                            <div class="item" @click="targetMaintenanceOverviewActive(1)">
                                <img class="item-img"
                                    :src="maintenanceOvervieActive == 1 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    保养工单
                                </div>
                            </div>
                            <div class="item" @click="targetMaintenanceOverviewActive(2)">
                                <img class="item-img"
                                    :src="maintenanceOvervieActive == 2 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    化验工单
                                </div>
                            </div>
                        </div>
                        <div class="maintenance-overview">
                            <ECharts :option="maintenanceOvervieOption" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import ECharts from '@/components/ECharts';
import Statistic from '@/components/Statistic';
import ZdyHeader from '@/components/ZdyHeader';

// 在组件中单独引入
import 'animate.css/animate.min.css';
import { onMounted } from 'vue';
import { ref } from 'vue';
import { getPipelineRetworkMonitoring, getPipelineRetworkMonitoringSortSelect, getPipelineRetworkMonitoringTypeSelect, getPipelineRetworkMonitoringCheckSelect } from '@/api/dispatch/detection/cockpit';
import contrastImg from '@/assets/three/image/contrast.svg';
import contrastActiveImg from '@/assets/three/image/contrast-active.svg';

const monitorActive = ref(0);
const maintenanceOvervieActive = ref(0);
const targetMonitorActive = (value) => {
    monitorActive.value = value;
}

const maintenanceOvervieOption = ref({});
const targetMaintenanceOverviewActive = async (value) => {
    try {
        maintenanceOvervieActive.value = value;

        const result = await [getPipelineRetworkMonitoringSortSelect, getPipelineRetworkMonitoringTypeSelect, getPipelineRetworkMonitoringCheckSelect][value]?.();

        maintenanceOvervieOption.value = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['已完成', '未完成'],
                left: 'center', // 将图例放置在右侧
                top: '5%',
                itemWidth: 10, // 图例标记的图形宽度。
                itemHeight: 10, // 图例标记的图形高度。
                textStyle: {
                    color: '#FFFFFF' // 设置图例文字颜色为白色
                }
            },
            xAxis: {
                type: 'category',
                data: result.data.dataList,
                axisLabel: {
                    color: '#FFFFFF' // 设置X轴标签文字颜色为白色
                }
            },
            yAxis: {
                type: 'value',
                name: '巡查数',
                nameTextStyle: {
                    color: '#FFFFFF' // 设置Y轴名称文字颜色为白色
                },
                axisLabel: {
                    color: '#FFFFFF' // 设置Y轴标签文字颜色为白色
                }
            },
            series: [
                {
                    name: '已完成',
                    type: 'bar',
                    stack: 'total',
                    barWidth: '30%',
                    itemStyle: {
                        color: '#0099CC' // 已完成的颜色设置为蓝色
                    },
                    data: result.data.completeList
                },
                {
                    name: '未完成',
                    type: 'bar',
                    stack: 'total',
                    barWidth: '30%',
                    itemStyle: {
                        color: '#CCCCCC' // 未完成的颜色设置为灰色
                    },
                    data: result.data.unCompleteList
                }
            ],
            grid: {
                left: '',
                left: '10%',
                bottom: '12%',
                containLabel: true
            }
        }
    } catch (error) {

    }
}

const pipelineRetworkMonitoring = ref({});



onMounted(() => {

    getPipelineRetworkMonitoring().then((response) => {
        pipelineRetworkMonitoring.value = response.data;
    });

    targetMaintenanceOverviewActive(0);

})
</script>
<style lang="scss" scoped>
@import "@/assets/styles/three-home.scss";

.contrast {
    display: flex;
    width: 100%;
    padding: 10px 0;
    margin-left: 10px;

    .item {
        width: 110px;
        height: 40px;
        position: relative;
        line-height: 40px;
        text-align: center;
        margin-left: 10px;
        cursor: pointer;
    }

    .label {
        color: #fff;
        font-size: 14px;
    }

    .item-img {
        position: absolute;
        z-index: -1;
        left: 0;
        width: 110px;
        height: 40px;
    }
}

.left-card-1 {
    height: 580px !important;

    .overview {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .item {
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #fff;
            margin-bottom: 20px;

            .label {
                margin: 5px 0;
            }

            .unit {
                font-size: 12px;
            }
        }
    }

    .monitor {
        box-sizing: border-box;
        padding-right: 10px;
        padding-left: 10px;

        .item {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin: 14px 0;
            color: #fff;
            align-items: center;
            margin-right: 10px;

            >div {
                flex: 1;
                text-align: center;
                font-size: 14px;
            }

            .time {
                flex: 1.5;
            }
        }

        .tabel-header {
            color: #37DBED !important;
            font-size: 14px;
        }
    }
}

.left-card-2 {
    height: 280px !important;

    .call-the-police {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;

        .item {
            height: 40px;
            width: 100%;
            background: rgba(#D43030, 0.6);
            border-radius: 4px;
            display: flex;
            align-items: center;
            margin: 10px 0;

            img {
                width: 18px;
                height: 18px;
                margin-right: 10px;
                margin-left: 15px;
            }

            .msg {
                font-size: 14px;
                color: #fff;
            }
        }
    }
}

.right-card-1 {
    height: 320px !important;

    .assets {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            justify-content: center;
            width: 160px;
            height: 79px;
            margin: 16px 0;

            img {
                width: inherit;
                position: absolute;
            }

            .label {
                font-size: 14px;
                color: #fff;
                margin-top: 6px;
                text-align: center;
            }
        }
    }
}

.right-card-2 {
    height: 540px !important;

    :deep(.chart-container) {
        height: 420px !important;
    }
}
</style>